<template>
  <a-card class="card" :title="message" :style="{ width: `${width}%`, height: `${height}` }">
    <slot></slot>
  </a-card>
</template>

<script lang="ts" setup>
// 定义期望接收的 props
interface Props {
  message: string;
  width: number;
  height: string;
  // 可以继续定义更多的 props
}

// 使用 withDefaults 来提供默认值
const props = withDefaults(defineProps<Props>(), {
  message: "Hello from child component",
  width: 100,
  height: "400px",
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* 调整阴影效果 */
  border-radius: 3px; /* 添加圆角 */
  background: #ffffff; /* 设置背景颜色 */
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增强阴影 */
}
</style>